<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>翻译</title>
    <style type="text/css">
.t{
    width : 500px;
}
    </style>
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
var appId = "44091D72CBEA0C589063B98766F54673676CC50E";
function translate() { //中文 - 英文
    var from = $("#from").val();
    var to = $("#to").val();
    //window.mycallback = function(response) { $("#t").val(response); }
    alert($("#s").val());
    var url = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate?appId=" + appId + "&from=" + from + "&to=" + to + "&text=" + $("#s").val() + "&oncomplete=?";
    $.getJSON(url,{},function(data){
        alert(1);
        $(".t").html(data);
    });
}
function mycallback(reponse){
    $(".t").html(reponse);
}
    
    </script>
  </head>

  <body>
    <h1>翻译文本</h1>
    从
    <select id="from">
        <option value="en">英文</option>
        <option value="zh-cn">中文</option>
    </select>
    到
    <select id="to">
    <option value="zh-cn">中文</option>
        <option value="en">英文</option>
    </select>
    
	<div>
	   <textarea rows="10" cols="50" id="s"></textarea>
	   <div class="t"></div>
	</div>
	<div>
	<button onclick="javascript:translate();">提交</button>
	</div>
  </body>
</html>
